<template>
    <view class="page">
        <!-- title:页面标题
			isBack：返回按键 需要传true 默认不显示
		-->
        <back :title="'修改地址'" :isBack="true"></back>
        <view class="map_box">
            <map id="map" @regionchange="mapChange" class="map" custom-style="maps" :show-location="true" scale="14"
                :latitude="latitude" :longitude="longitude"></map>
            <view class="posi_box" @click="goToMyLocation"></view>
            <view class="weizhixinxi_box">
                <view class="wzxx_left_text_box">{{ labelHouse }}</view>
                <u-icon name="arrow-right" color="#333" size="28"></u-icon>
            </view>
            <view class="budongdian_box"></view>
        </view>
        <view class="current_adress_box">
            <view class="left_adress_box">
                <view class="left_top_dress_box">{{ labelHouse }}</view>
                <view class="left_bot_dress_box">{{ adressDetail }}</view>
            </view>
            <view class="rt_genggai_box" @click="changeAdress" v-if="selectSta != '1'">
                手动搜索<u-icon name="arrow-right" color="rgba(153, 153, 153, 1)" size="24"></u-icon>
            </view>
        </view>
        <!-- <view class="house_number_box">
            <view class="house_text_box">门牌号</view>
            <view class="house_zs_box">
                <input type="text" placeholder="如:8栋801">
            </view>
        </view> -->
        <view class="enter_adress_box" @click="confirmAdress">确认地址</view>
    </view>
</template>
<script>
import back from "@/components/goback/goback"
export default {
    components: {
        back
    },
    data() {
        return {
            latitude: '',
            longitude: '',
            scale: 15,
            markers: [],
            labelHouse: '',// 具体地址
            adressDetail: '',// 地址
            city: '',//城市
            dy: false,
            jumps: '',//1:从添加地址过来2：从填写勘察员信息来
            southWest: '',
            northEast: '',
            selectSta: ''
        }
    },
    onReady() {
        /**
         * 获取经纬度
         */
        if (!this.dy) {
            this.getLocation()
            this.mapChange()
        }

    },
    onLoad(options) {
        this.kcysta = options.kcysta
        this.jumps = options.jumps
        this.dy = options.dy
        this.latitude = options.latitude
        this.longitude = options.longitude
        this.selectSta = options.selectSta
        this.getPosition(this.latitude, this.longitude)

    },
    onShow() {


    },
    methods: {
        getLocation() {
            var that = this;
            uni.getLocation({
                isHighAccuracy: true, // 开启地图精准定位
                type: 'gcj02', // 坐标系类型
                success: function (res) {
                    that.latitude = res.latitude
                    that.longitude = res.longitude
                },
                fail: function (res) {
                }
            });
        },
        // 更改地址
        changeAdress() {
            uni.navigateTo({
                url: '/userPage/adress/adddress'
            })
        },
        // 回到当前定位
        goToMyLocation() {
            const mapContext = uni.createMapContext('map', this);
            uni.getLocation({
                type: 'gcj02',
                success: (res) => {
                    const location = {
                        longitude: res.longitude,
                        latitude: res.latitude,
                    };
                    mapContext.moveToLocation(location);
                },
                fail: () => {
                    uni.showToast({
                        title: '无法获取定位信息',
                        icon: 'none',
                    });
                },
            });
        },
        mapChange() {
            let that = this
            uni.createMapContext("map", this).getCenterLocation({
                success(res) {
                    that.getPosition(res.latitude, res.longitude)
                }
            })
        },
        getPosition(lat, log) {
            // console.log(lat,log)
            const tMap = new this.TMap({
                key: 'YVYBZ-TUWL4-PTEUN-DAV24-O6AS2-F5FXQ'
            })
            tMap.reverseGeocoder({
                location: {
                    latitude: lat,
                    longitude: log,
                }, success: (res) => {
                    let adreeDetail = res.result.formatted_addresses
                    this.adressDetail = adreeDetail.standard_address
                    this.labelHouse = adreeDetail.recommend
                    this.city = res.result.address_component.city
                    this.longitude = res.result.location.lng
                    this.latitude = res.result.location.lat

                }
            })
        },
        // 确认地址
        confirmAdress() {
            this.$store.state.newdress = this.adressDetail
            this.$store.state.newhouse = this.labelHouse
            this.$store.state.newcity = this.city
            if (this.jumps == "1") {
                uni.navigateTo({
                    url: '/userPage/editadres/editadres?location=' + this.labelHouse + '&lng=' + this.longitude + '&lat=' + this.latitude + '&bigHouse=' + this.adressDetail
                })
            } else if (this.jumps == '2') {
                this.$store.state.insterPep = {
                    location: this.labelHouse,
                    lng: this.longitude,
                    lat: this.latitude,
                    bigHouse: this.adressDetail
                }
                uni.navigateBack({ delta: 1 })

            } else {
                // uni.navigateTo({
                //     url: '/userPage/addadre/addadre?location=' + this.labelHouse + '&lng=' + this.longitude + '&lat=' + this.latitude + '&bigHouse=' + this.adressDetail
                // })
                this.$store.state.insterPep = {
                    location: this.labelHouse,
                    lng: this.longitude,
                    lat: this.latitude,
                    bigHouse: this.adressDetail
                }
                uni.navigateBack({ delta: 1 })
            }

        }
    }
}
</script>
<style lang="scss" scoped>
.page {
    width: 100vw;
    min-height: 100vh;
    background-color: rgba(255, 255, 255, 1);

    .map_box {
        width: 100%;
        height: 738rpx;
        opacity: 1;
        margin-bottom: 60rpx;
        position: relative;

        .map {
            width: 100%;
            height: 100%;

        }


        .posi_box {
            position: absolute;
            width: 50rpx;
            height: 50rpx;
            background-image: url('https://build.lwjcg.com/uploads/pos.png');
            background-size: 100% 100%;
            left: 20rpx;
            bottom: 60rpx;

        }

        .budongdian_box {
            width: 54rpx;
            height: 87rpx;
            background-image: url('https://build.lwjcg.com/uploads/zhuang.png');
            background-size: 100% 100%;
            position: absolute;
            left: 0;
            right: 0;
            top: 294rpx;
            margin: auto;
        }

        .weizhixinxi_box {
            position: absolute;
            left: 0;
            right: 0;
            top: 210rpx;
            margin: auto;
            width: 400rpx;
            height: 80rpx;
            background-color: rgba(255, 255, 255, 1);
            text-align: center;
            line-height: 80rpx;
            display: flex;
            justify-content: space-around;
            border-radius: 20rpx;
            align-items: center;
            box-sizing: border-box;
            padding: 0 16rpx;

            .wzxx_left_text_box {
                width: 370rpx;
                font-size: 28rpx;
                font-weight: 550;
                color: rgba(0, 0, 0, 1);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }

    /*当前地址 */

    .current_adress_box {
        width: 658rpx;
        height: 158rpx;
        opacity: 1;
        border-radius: 20rpx;
        background-color: rgba(245, 245, 245, 1);
        margin: auto;
        padding: 0 36rpx 0 20rpx;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 22rpx;

        .left_adress_box {
            width: 425rpx;
            height: 120rpx;

            .left_top_dress_box {
                width: 100%;
                height: 60rpx;
                line-height: 60rpx;
                font-size: 40rpx;
                font-weight: 550;
                color: rgba(0, 0, 0, 1);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .left_bot_dress_box {
                width: 100%;
                height: 60rpx;
                line-height: 60rpx;
                font-size: 26rpx;
                font-weight: 400;
                color: rgba(166, 166, 166, 1);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        .rt_genggai_box {
            width: 150rpx;
            height: 42rpx;
            border-radius: 6rpx;
            background: rgba(255, 255, 255, 1);
            border: 2rpx solid rgba(229, 229, 229, 1);
            font-size: 24rpx;
            font-weight: 400;
            line-height: 40rpx;
            color: rgba(0, 0, 0, 1);
            text-align: center;

        }
    }

    .house_number_box {
        width: 658rpx;
        height: 104rpx;
        background-color: rgba(245, 245, 245, 1);
        margin: auto;
        border-radius: 20rpx;
        box-sizing: border-box;
        padding: 0 30rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 160rpx;

        .house_text_box {
            height: 104rpx;
            font-size: 32rpx;
            font-weight: 400;
            line-height: 104rpx;
            color: rgba(56, 56, 56, 1);
            margin-right: 14rpx;
        }

        .house_zs_box {
            width: 430rpx;
            height: 60rpx;

            input {
                width: 100%;
                height: 100%;
                line-height: 60rpx;
                border: none;
                color: #333;
            }
        }
    }

    .enter_adress_box {
        width: 652rpx;
        height: 100rpx;
        border-radius: 20rpx;
        background-color: rgba(26, 194, 121, 1);
        margin: auto;
        text-align: center;
        line-height: 100rpx;
        font-size: 40rpx;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
    }
}
</style>